<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <fade :query="query" :items="items">
      <li v-for="(item, index) in ComputedList"
       :key="item.msg" :data-index="index">
        {{ item.msg }}
      </li>
    </fade>
  </div>

  <template id="temp">
    <transition-group name="item" tag="ul" @before-enter="beforeEnter"
     @enter="enter" @leave="leave" :css="false">
      <slot></slot>
    </transition-group>
  </template>
  
  <script>
    Vue.component('fade', {		    // 定义组件名为fade
      props: ['query', 'items'],	// 组件实例的属性
      template: '#temp', 
      methods: {
        beforeEnter (el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
          }, delay)
        },
        leave (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, {opacity: 0, height: 0}, {complete: done})
          }, delay)
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        query: '',
        items: [
          { msg: '张三' },
          { msg: '李四' },
          { msg: '张芳芳' },
          { msg: '王琳琳' },
          { msg: '冯圆' }
        ]
      },
      computed: {	 // 计算属性
        ComputedList () {
          var vm = this.query
          var nameList = this.items
          return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
          })
        }
      }
    })
  </script>
</body>
</html>